import { fetchList, handleAction } from ".";
import { businessStateMap } from "./dict";
import { columns } from "./store";
import { getSelfNodeIcon } from "@system/menu/store";
export const tablePage = renderTablePage();
export const tableData = ref([]);
export const tableLoading = ref(false);
const defineBodyCellMap = ({ value, text, index, column, record }) => {
  const renderServerName = () => (
    <div>
      <a
        href={record.servername}
        style="text-decoration: underline"
        target="_blank"
        rel="noopener noreferrer"
      >
        {record.servername}
      </a>
      <a-button
        type="link"
        style="color: #333;"
        size="small"
        onClick={() =>
          copyText(record.servername)
            .then(() => message.success($t("base.copySucess")))
            .catch(() => {
              message.error($t("base.copyFail"));
            })
        }
      >
        <copy-outlined />
      </a-button>
    </div>
  );
  const renderStatus = () => (
    <div>
      <i class={record.status === 0 ? "s-52c41a" : "s-c1c1c1"}>
        {selectDictLabel(businessStateMap, record.status)}
      </i>
    </div>
  );

  const renderAction = () => (
    <div>
      {withDirectivePower({
        vNode: (
          <div class="s-table-body_cell">
            <s-button
              type="link"
              onClick={() => handleAction({ record, type: "data" })}
              icon={renderIcon(getSelfNodeIcon("channelApi.queryChannelChart"))}
            >
              {$t("base.data")}
            </s-button>
            <a-divider type="vertical" />
          </div>
        ),
        bindingValue: "channelApi.queryChannelChart",
      })}

      {withDirectivePower({
        vNode: (
          <div class="s-table-body_cell">
            {renderUpdate.call({
              record,
              handleAction,
              identify: "channelApi.update",
            })}
            <a-divider type="vertical" />
          </div>
        ),
        bindingValue: "channelApi.update",
      })}

      {withDirectivePower({
        vNode: (
          <div class="s-table-body_cell">
            {renderDisable.call({
              record,
              handleAction,
              identify: "channelApi.updateStatus",
            })}
            <a-divider type="vertical" />
          </div>
        ),
        bindingValue: "channelApi.updateStatus",
      })}
      {withDirectivePower({
        vNode: renderDelete.call({
          record,
          handleAction,
          identify: "channelApi.delete",
        }),
        bindingValue: "channelApi.delete",
      })}
    </div>
  );
  return new Map([
    [{ key: "index" }, renderIndex],
    [{ key: "servername" }, renderServerName],
    [{ key: "status" }, renderStatus],
    [{ key: "action" }, renderAction],
  ]);
};
const handleRenderBodyCellTask = (props) => {
  const array = [...defineBodyCellMap(props)].filter(
    ([object]) => object.key === props.column.key
  );
  const _this = { tablePage, ...props };
  return array.map(([, value]) => value.call(_this));
};

export const tableConfig = () => {
  const defineTable = {
    pagination: tablePage,
    loading: tableLoading,
    on: {
      change(paging: { current: number; pageSize: number }) {
        tablePage.current = paging.current;
        tablePage.pageSize = paging.pageSize;
        fetchList();
      },
    },
    columns: columns,
    dataSource: tableData,
    tableSlot: {
      bodyCell: (props) => handleRenderBodyCellTask(props),
    },
  };
  return defineTable;
};
